import React, { useEffect, useState } from 'react';
import { ResponsiveGrid, Pagination, Loading, Button, Dialog, Form, Input, Message, Select } from '@alifd/next';
import { Table, Popconfirm } from 'antd';
import styles from './index.module.scss';
import { logger, useHistory } from 'ice';
import { useEffectOnce } from 'react-use';
import { newAdminUser } from './service';
import { User } from '@/api/GlobalInterface';

const { Cell } = ResponsiveGrid;
const FormItem = Form.Item;
const Option = Select.Option;
const formItemLayout = {
  labelCol: {
    fixedSpan: 6,
  },
  wrapperCol: {
    span: 18,
  },
};

const NewAdminUser = () => {
  const history = useHistory();
  return (
    <div>
      <ResponsiveGrid gap={20}>
        <Cell colSpan={12}>
          <div className={styles.container}>
            <div className={styles.title}>新建管理员</div>
            <Form style={{ width: '60%', marginLeft: 30 }} {...formItemLayout} colon>
              <FormItem label="用户名称" required requiredMessage="请输入用户名称" size="large" labelTextAlign="left">
                <Input name="userName" placeholder="请输入用户名称，登陆时以此登陆" />
              </FormItem>
              <FormItem label="邮箱" required requiredMessage="请输入邮箱地址" size="large" labelTextAlign="left">
                <Input name="email" placeholder="请输入个人邮箱" />
              </FormItem>
              <FormItem label="账号密码" required requiredMessage="请输入密码" size="large" labelTextAlign="left">
                <Input name="password" placeholder="请输入密码" />
              </FormItem>
              <FormItem label="身份" required requiredMessage="请选择身份" size="large" labelTextAlign="left">
                <Select name="roleId" hasClear placeholder="请选择用户身份" style={{ marginRight: 8 }}>
                  <Option value="1">超级管理员</Option>
                  <Option value="2">管理员</Option>
                  <Option value="3">用户</Option>
                </Select>
              </FormItem>
              <FormItem label="状态" required requiredMessage="请选择用户状态" size="large" labelTextAlign="left">
                <Select name="status" hasClear placeholder="请选择用户状态" style={{ marginRight: 8 }}>
                  <Option value="true">激活</Option>
                  <Option value="false">禁用</Option>
                </Select>
              </FormItem>
              <FormItem label=" " colon={false} size="medium">
                <Form.Submit
                  type="primary"
                  validate
                  onClick={(values: User, errors) => {
                    // logger.log(values);
                    if (!errors) {
                      newAdminUser(values)
                        .then(() => {
                          Message.success({
                            content: '新建管理员成功',
                          });
                        })
                        .then(() => {
                          history.push('/basic/AdminUsersList');
                        });
                    }
                  }}
                  style={{ marginRight: 8 }}
                >
                  新建
                </Form.Submit>
              </FormItem>
            </Form>
          </div>
        </Cell>
      </ResponsiveGrid>
    </div>
  );
};

export default NewAdminUser;
